<template>
  <div class="swiper-container swiper">
    <div class="swiper-wrapper" v-if="data.length>0">
      <div class="swiper-slide" v-for="(item,index) in data" :key="index">
        <img :src="item" alt="pic">
      </div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <p style="display:none">{{getImgData}}</p>
  </div>
</template>
<script>
export default {
  props:["imgData"],
  components: {},
  name: "",
  data() {
    return {
      data:[]
    };
  },
  computed:{
    getImgData(){
      if(this.imgData)this.data=this.imgData
      return true
    }
  },
  methods: {},
  mounted(){
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 3000,
      },
      loop : true,
      pagination: {
        el: '.swiper-pagination',
      },
    })   
  }
};
</script>
<style lang="scss" scoped>
.swiper-slide{
  height: 160px;

  img{
    width: 100%;
    height: 100%;
    min-height: 160px;
    max-height: 300px;
  }
}
</style>